<template>
    <section>
        <!--高级查询-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="pendingMessage">
                <el-form-item>
                    <el-input v-model="pendingMessage.name" placeholder="宠物名称"></el-input>
                </el-form-item>
               <!-- <el-form-item>
                    <el-input v-model="pendingMessage.user.phone" placeholder="用户"></el-input>
                </el-form-item>-->
                <el-form-item >
                    <el-select v-model="pendingMessage.state" placeholder="请选择">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="已处理" value=1></el-option>
                        <el-option label="未处理" value=0></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="searchQuery">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="pendingSubmit" :disabled="this.sels.length===0">处理</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <!--部门列表-->
        <!--
            highlight-current-row属性即可实现单选
            selection-change当选择项发生变化时会触发该事件
        -->
        <el-table :data="pendingMessages" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
            <!--type="selection"选择多行数据-->
            <el-table-column type="selection">
            </el-table-column>
            <el-table-column type="index" align="center" label="序号">
            </el-table-column>
            <el-table-column prop="title" align="center" label="标题">
            </el-table-column>
            <el-table-column prop="name" align="center" label="宠物名称">
            </el-table-column>
            <el-table-column prop="price" align="center" label="售价">
            </el-table-column>
            <el-table-column prop="age" align="center" label="年龄">
            </el-table-column>
            <el-table-column prop="gender" align="center" label="上架时间">
            </el-table-column>
            <el-table-column prop="coat_color" align="center" label="毛色">
            </el-table-column>
            <el-table-column prop="petType.name" align="center" label="品种">
            </el-table-column>
            <el-table-column prop="address" align="center" label="地址">
            </el-table-column>
            <el-table-column prop="user.phone" align="center" label="用户">
            </el-table-column>
            <el-table-column prop="gender"align="center" label="性别">
                <template scope="scope">
                    <div style="color: red" v-if="scope.row.gender==0">母</div>
                    <div style="color: green" v-if="scope.row.gender==1">公</div>
                </template>
            </el-table-column>
            <el-table-column prop="state"align="center" label="状态">
                <template scope="scope">
                    <div style="color: red" v-if="scope.row.state==0">未处理</div>
                    <div style="color: green" v-if="scope.row.state==1">已处理</div>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
       <el-col :span="24" class="toolbar">
           <!-- <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>-->
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
            </el-pagination>
        </el-col>
        <el-dialog title="处理" :visible.sync="dialogVisible"  width="30%">
            <!--处理弹窗-->
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
                <el-form-item label="宠物名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="成本价" prop="costprice">
                    <el-input v-model="ruleForm.costprice"></el-input>
                </el-form-item>
                <el-form-item label="售价" prop="saleprice">
                    <el-input v-model="ruleForm.saleprice"></el-input>
                </el-form-item>
                <el-form-item prop="photo" label="萌宠照片">
                    <el-upload
                            class="upload-demo"
                            action="http://localhost/fastDfs/upload"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :on-success="handleSuccess"
                            :file-list="fileList"
                            list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="宠物简介">
                    <!--<el-input v-model="productForm.productDetail.intro"></el-input>-->
                    <quill-editor v-model="ruleForm.intro" :options="editorOption"></quill-editor>
                </el-form-item>
                <el-form-item label="领养须知" >
                    <!--<el-input v-model="productForm.productDetail.orderNotice"></el-input>-->
                    <quill-editor v-model="ruleForm.adoptNotice" :options="editorOption"></quill-editor>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click.native="addSubmit" :loading="addLoading">确 定</el-button>
          </span>
        </el-dialog>

    </section>
</template>
<script>
    import { quillEditor } from 'vue-quill-editor'
    import quillOption from '../../common/quill-config'
    export default {
        data() {
            return {
                pendingMessages:[],
                editorOption:quillOption,
                listLoading:false,
                total:0,
                sels:[],
                fileList:[],
                pageSize:10,
                currentPage:1,
                parentDepartments:[],
                managerDepartments:[],
                pendingMessage:{
                    name:"",
                    user:{
                      phone:"",
                    },
                    state:""
                },
                dialogVisible:false,
                ruleForm:{
                    name:"",
                    costprice:"",
                    saleprice:"",
                    intro:"",
                    adoptNotice:"",
                    //用户信息id
                    userId:"",
                    //宠物类型id
                    petTypeId:"",
                },
                rules:{
                    name: [
                        { required: true, message: '请输入部门名称', trigger: 'blur' },
                    ],
                },
                addLoading:false
            }
        },
        methods:{
            handlePreview(){

            },
            handleRemove(file, fileList){
                var url = "";
                //如果是增加中的删除图片
                if(file.response){
                    url=file.response.result;
                }else{//如果是编辑中的删除图片
                    url=file.url.substring(this.fastUrl.length);
                }
                let param = {
                    "url":url
                }
                this.$http.post("http://localhost/fastDfs/delete",param).then((res=>{
                    if(res.data.success){
                        //如果没有图片了，则直接将resources设置为空
                        if(fileList.length==0){
                            this.ruleForm.resources="";
                            return;
                        }
                        //如果还有图片遍历
                        for(var j=0;j<fileList.length;j++){
                            var fileObj =  fileList[j];
                            //如果为增加按钮
                            if(fileList.response){
                                if(j==1){
                                    this.ruleForm.resources=fileObj.response.result;
                                }else{
                                    this.ruleForm.resources=this.ruleForm.resources+","+fileObj.response.result;
                                }
                            }else {//如果为编辑按钮
                                if(j==0){
                                    //url: "http://121.37.194.36/group1/M00/00/07/wKgABF7bN9aAUr5jAABMYp1lVaA616.jpg"
                                    this.productForm.resources=fileObj.url.substring(this.fastUrl.length);
                                }else{//上传几张图片地址用，隔开
                                    this.productForm.resources=this.productForm.resources+","+fileObj.url.substring(this.fastUrl.length)
                                }
                            }
                        }
                    }
                }));
            },
            handleSuccess(response, file, fileList){
                console.debug(1,response)
                console.debug(2,file)
                console.debug(3,fileList)
                //this.productForm.resources = response.result;
                //遍历每张图片
                for (var i=0;i<fileList.length;i++){
                    //获取单张图片
                    var fileObj = fileList[i];
                    //如果存在response,则为增加服务图片
                    if(fileObj.response){
                        //如果只上传一张图片,直接上传地址
                        if(i==0){
                            this.ruleForm.resources=fileObj.response.result;
                        }else{//上传几张图片地址用，隔开
                            this.ruleForm.resources=this.ruleForm.resources+","+fileObj.response.result
                        }
                    }else{//没有response为编辑增加图片
                        if(i==0){
                            //url: "http://121.37.194.36/group1/M00/00/07/wKgABF7bN9aAUr5jAABMYp1lVaA616.jpg"
                            this.ruleForm.resources=fileObj.url.substring(this.fastUrl.length);
                        }else{//上传几张图片地址用，隔开
                            this.ruleForm.resources=this.ruleForm.resources+","+fileObj.url.substring(this.fastUrl.length)
                        }
                    }
                }
            },
            //多选框选择事件
            selsChange(sels){
                this.sels = sels;
            },
            //编辑事件,index下标,row行对象
            handleEdit(index,row){
               //ruleForm:{
                    /*this.ruleForm.name=row.name,
                    this.ruleForm.sn=row.sn,
                    this.ruleForm.state=row.state,
                    this.ruleForm.id = row.id*/
                    for (var k in row){
                        this.ruleForm[k] = row[k];
                    }
                    //判断parent是否为空
                    if(this.ruleForm.parent){
                        this.ruleForm.parentId=this.ruleForm.parent.id
                    }else {
                        this.ruleForm.parentId="";
                    };
                    //判断manager是否为空
                    if(this.ruleForm.manager){
                        this.ruleForm.managerId=this.ruleForm.manager.id
                    }else {
                        this.ruleForm.managerId="";
                    };

                //}
                this.dialogVisible = true;

            },
            //删除
            handleDel(index,row){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.delete("http://localhost/pendingMessage/"+row.id).then((res=>{
                        console.debug("###################",res);
                        if(res.data.success){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.searchMasterPendingMessage();
                        }else{
                            this.$message.error(res.data.msg);
                        }
                    }));
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //批量删除
            batchRemove(){
                console.debug("555555555555555555",this.sels);
                //let ids = this.sels.id
                var ids = this.sels.map(item => item.id)
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.patch("http://localhost/pendingMessage/deleteAll",ids).then((res=>{
                        console.debug("###################",res);
                        if(res.data.success){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.searchMasterPendingMessage();
                        }else{
                            this.$message.error(res.data.msg);
                        }
                    }));
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //当前页码改变绑定事件
            handleCurrentChange(val){
                console.debug("11111111111",val)
                this.currentPage=val;
                this.searchMasterPendingMessage();
            },
            formatState(row, column){
                console.debug("----------------",row);
                return row.state==1?"启用":"禁用"
            },

            searchMasterPendingMessage(){
                let param ={
                    "currentPage":this.currentPage,
                    "pageSize":this.pageSize,
                    "name":this.pendingMessage.name,
                    "state":this.pendingMessage.state,
                    "phone":this.pendingMessage.user.phone
                }
                console.debug(param)
                this.$http.patch("http://localhost/searchMaster/searchMasterByQuery",param).then((result=>{
                    this.pendingMessages = result.data.data;
                    this.total=result.data.total;
                }));
            },
            //高级查询
            searchQuery(){
                this.searchMasterPendingMessage();
            },
            //处理
            pendingSubmit(){
                var ids = this.sels.map(item=>item.id);
                if(ids.length>=2){
                    this.$message({
                        message: '一次性只能处理一条数据!!',
                        type: 'error'
                    });
                    return;
                }
                var row = this.sels[0];
                console.debug("------------------",row)
                //回显数据
                this.ruleForm.name= row.name;
                //成本价
                this.ruleForm.costprice=row.price;
                //用户
                this.ruleForm.userId=row.id;
                //品种
                this.ruleForm.petTypeId=row.petType.id;
                //售价
                this.ruleForm.saleprice=row.price;
                //资源
                this.ruleForm.resources=row.resources;
                //回显图片资源
                if(row.resources){
                    //逗号分隔每张图片
                    var imgArr = row.resources.split(",");
                    for(var a=0;a<imgArr.length;a++){
                        this.fileList.push({"url":this.fastUrl+imgArr[a]});
                    }
                }
                this.dialogVisible=true;
            },
            //弹窗确定
            addSubmit(){
                this.$refs["ruleForm"].validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            let param = Object.assign({}, this.ruleForm);
                            console.debug("====================",param)
                            let petDetail = {
                                "intro":param.intro,
                                "adoptNotice":param.adoptNotice
                            };
                            param.petDetail=petDetail;
                            let searchMasterMessage = {
                                id:param.userId
                            }
                            param.searchMasterMessage= searchMasterMessage;
                            let petType={
                                id:param.petTypeId
                            }
                            param.type=petType;
                            //编辑确定
                            this.$http.post("http://localhost/searchMaster/handlePendingMessage",param).then((result => {
                                if (result.data.success) {
                                    this.$message({
                                        type: 'success',
                                        message: '处理成功!'
                                    });
                                    this.searchMasterPendingMessage();
                                } else {
                                    this.$message.error(result.data.msg);
                                }
                                this.dialogVisible = false;
                            }));
                        })
                    }
                })
            },
        },
        mounted(){
            this.searchMasterPendingMessage();
        }
    }
</script>